<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索组件 -->
      <questionsSearch :simple="simple" @search="search" />
      <!-- 提示 -->
      <el-alert
        type="info"
        show-icon
        :closable="false"
      >{{ '数据一共' + total + '条' }}</el-alert>
      <br>
      <!-- 表格 -->
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="120"
        />
        <el-table-column
          prop="subject"
          label="学科"
        />
        <el-table-column
          prop="catalog"
          label="目录"
        />
        <el-table-column
          label="题型"
        >
          <template slot-scope="scope">
            {{ questionType(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
        >
          <template slot-scope="scope">
            {{ newDate(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
        >
          <template slot-scope="scope">
            {{ difficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          min-width="90"
        />
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="{ row }">

            <el-button class="view" type="primary" icon="el-icon-view" circle size="mini" @click="browse(row)" />
            <el-button class="edit" type="success" icon="el-icon-edit" circle size="mini" @click="hEdit(row.id)" />
            <el-button class="delete" type="danger" icon="el-icon-delete" circle size="mini" @click="hDel(row.id)" />
            <el-button class="check" type="warning" icon="el-icon-check" circle size="mini" @click="choiceAdd(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          :current-page="listPromise.page"
          :page-sizes="[1,5,10,20]"
          :page-size="listPromise.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 预览组件  -->
      <el-dialog
        title="题目预览"
        :visible.sync="showDialog"
        width="65%"
      >
        <questionsDialog v-if="showDialog" :cur-id="browseObj.curId" :question-type-list="browseObj.questionTypeList" :question-difficulty-type-list="browseObj.questionDifficultyTypeList" />
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showDialog = false">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import questionsDialog from './questions-randoms-dialog/questionsDialog.vue'
import questionsSearch from '../components/questions-search.vue' // 搜索部分组件
import { list, choiceAdd, remove } from '@/api/hmmm/questions.js' // 获取基础题库列表 API
import { parseTime } from '@/utils/index.js' // 解析时间
import { questionType, difficulty } from '@/api/hmmm/constants.js' // 枚举
import { simple } from '@/api/hmmm/subjects.js'
export default {
  components: {
    questionsSearch,
    questionsDialog
  },
  data() {
    return {
      list: [], // 获取基础题库列表
      simple: [], // 学科
      listPromise: {
        page: 1, // 当前页数
        pagesize: 5 // 一页多少条
      },
      total: 0, // 总页数
      showDialog: false, // 浏览弹窗
      browseObj: {
        curId: '',
        questionTypeList: {}, // 保存处理后的问题类型
        questionDifficultyTypeList: {} // 保存处理后的问题难度

      }

    }
  },
  created() {
    this.loadList()
    this.loadSimple()
  },
  methods: {
    async loadRemove(id) {
      const res = await remove({ id })
      console.log(res)
      if (res.status) {
        if (this.list.length <= 1 && this.listPromise.page !== 1) {
          this.listPromise.page
          this.listPromise.page--
          console.log(this.listPromise.page)
        }
        this.loadList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } else {
        this.$message({
          type: 'error',
          message: '删除失败!'
        })
      }
    }, // 删除
    async loadChoice(id) {
      const res = await choiceAdd({ id: id, choiceState: 1 })
      if (res.status) {
        if (this.list.length <= 1 && this.listPromise.page !== 1) {
          this.listPromise.page
          this.listPromise.page--
          console.log(this.listPromise.page)
        }
        this.loadList()
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      } else {
        this.$message({
          type: 'error',
          message: '添加失败!'
        })
      }
    }, // 加入精选
    async loadList(from) {
      const res = await list({ ...this.listPromise, ...from })
      this.list = res.data.items
      this.total = res.data.counts
    }, // 获取基础题库列表
    async loadSimple() {
      const res = await simple()
      this.simple = res.data
    }, // 获取简单学科
    newDate(data) {
      return parseTime(data)
    }, // 解析时间
    questionType(type) {
      return questionType.find(item => {
        return item.value === Number(type)
      }).label
    }, // 利用枚举处理题干
    difficulty(num) {
      return difficulty.find(item => {
        return item.value === Number(num)
      }).label
    }, // 利用枚举处理难度
    handleSizeChange(val) {
      this.listPromise.pagesize = val
      this.loadList()
    }, // 每页 多少 条
    handleCurrentChange(val) {
      this.listPromise.page = val
      this.loadList()
    }, // 当前页
    search(from) {
      this.loadList(from)
    }, // 搜索
    choiceAdd(id) {
      // this.btnBlur(evt)
      // 敲黑板上面三行是为了让按钮失去焦点点击后不在高亮

      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'el-icon-info',
        type: 'warning'
      }).then(() => {
        this.loadChoice(id)
        // this.btnBlur(evt)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        // this.btnBlur(evt)
      })
    }, // 添加精选
    hEdit(id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    }, // 编辑
    hDel(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadRemove(id)
        // this.btnBlur(evt)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }, // 删除
    browse(row) {
      this.showDialog = true
      this.browseObj.curId = row.id
      this.browseObj.questionTypeList[row.questionType] = this.questionType(row.questionType)
      this.browseObj.questionDifficultyTypeList[row.difficulty] = this.difficulty(row.difficulty)
    }
  }
}
</script>

<style scoped lang='scss'>
  .view:hover {
    background-color: #3f9eff;
    color: #fff;
    border-color: #3f9eff;
  }
  .view {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
  .edit{
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
  }

  .edit:hover{
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
  .delete{
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }

  .delete:hover{
        background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
  .check{
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;
  }

  .check:hover{
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }

  .container{
    padding: 10px;
  }

  .page {
    text-align: right;
  }
</style>
